<template>
  <div class="back-white">
    <div>
      <page-title>问答管理</page-title> 
    </div>
    <div class="search-box"> 
      <div class="float-left">
        总计{{postForm.total}}条数据 
      </div> 
    </div>  
    <div class="content clear-both "> 
      <div class="main-box">


        <div class="group-list clear-both" v-for="(item,index) in questionArr" :key="index"  @click="fetchArtDetail(item)" >
          <div class="left-box float-left">
            <div class="is_top" v-if="item.recommended==1">推荐</div>
            <div class="title">{{item.title?item.title:item.content}}</div> 
            <div class="info">评论： {{item.first_comment}}</div>  
            <div class="footer-text">
              <p class="topic" v-if="item.topic"><span>#</span>{{item.topic}}；&nbsp;&nbsp;&nbsp;</p>
              <span>{{item.looked_cnt}} 查看 </span>；&nbsp;&nbsp;&nbsp;
              <span>{{item.reply_cnt}} 回复</span>
            </div>                    
          </div>
            
          <div class="right-box float-left text-center"> 
            <div class="text-center" v-if="item.is_edited==1">
              <i class="el-icon-s-flag"></i>
            </div> 
            <el-button type="primary" class="btn"  @click.stop="toEdit(item)">编辑</el-button>
            <el-button type="" class="last-btn"  @click.stop="deleteItem(item)">删除</el-button>
            
          </div>
        </div> 
        


      </div>
      <div class="text-center" v-if="questionArr.length==0">暂无数据</div> 
    </div>
    <div class="pagination text-center"> 
        <el-pagination 
          @current-change="pageChange" 
          layout="prev, pager, next"
          :total="postForm.total">
        </el-pagination>
    </div>


        <!--修改详情-->
    <el-dialog title="编辑问答"  center :visible.sync="dialogFormVisible" width="750px">
        <el-form :model="editUserInfo">
          <el-form-item label="问答标题" label-width="100px">
              <el-input 
              type="textarea"
              :rows="3"
              placeholder="请输入问答标题"  
              class="edit-input" 
              v-model="editUserInfo.title" 
              autocomplete="off">
              </el-input>
          </el-form-item>
          <el-form-item label="日志内容" label-width="100px">
              <el-input 
              type="textarea" 
              placeholder="请输入日志内容"  
              class="edit-input content-input" 
              v-model="editUserInfo.content" 
              autocomplete="off">
              </el-input>
          </el-form-item>  
        </el-form> 
        <div style="margin-top:10px;">
          <update-img  @clearImg="clearImg" :imgUrl="item" :index="index" v-for="(item,index) in editUserInfo.pics" :key="index"></update-img>
          <update-img  @change="addImgEvent" v-if="editUserInfo.pics.length<9"></update-img>  
        </div> 
              
        <div slot="footer" class="dialog-footer">
            <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
            <el-checkbox v-model="editUserInfo.checked">设为推荐</el-checkbox>
            <el-button type="primary" @click="adminSave">保存</el-button>
        </div>
    </el-dialog> 
        <!--日志详情-->
    <el-dialog title="日志详情"  center :visible.sync="detailVisible" width="900px">
        <div class="news-content ">
          <div class="header text-center"> 
            <div class="header-img">
              <el-image
              style="width:50px;height:50px;border-radius:50%;"
              :src="detailData.author_head"
              fit="cover"></el-image> 
            </div>
            <div class="name text-center">{{detailData.author_name}}</div>
          </div>
          <div class="main">
            <div class="date-time text-center">发布时间：{{detailData.create_at}}</div>
            <div class="content-text">
              {{detailData.content}}
            </div>
            <div class="content-img-box clear-both" v-if="detailData.pics">
              <p class="img-item float-left" v-for="(item,index) in detailData.pics" :key="index">
                <el-image :src="item" lazy></el-image> 
              </p> 
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer"> 
            <el-button type="primary" @click="detailVisible=false">返回</el-button>
        </div>
    </el-dialog> 
    
  </div>
</template>
<script >
  import * as api from './../../../api/api';
  export default {
    data(){
      return { 
          questionArr:[],
          dialogFormVisible:false,
          editUserInfo:{
            title:'',
            content:'',
            checked:'',
            article_id:'',
            pics:[],
          },
          postForm:{
            size:20,
            page:1,
            nickname:'柚子',
            total:0, 
          },

          detailVisible:false,
          detailData:{},
      }
    },
    created(){
      this.getPhotowallListData();
    },
    methods:{
      //编辑
      toEdit(item){
        console.log(item);
        this.dialogFormVisible=true;
        this.editUserInfo={
          title:item.title,
          content:item.content,
          checked:item.recommended==1?true:false,
          article_id:item.article_id,
          pics:item.pics?item.pics:[],
        }
      },
      adminSave(){
        let vm = this;
        if(!vm.editUserInfo.title){
          vm.$message('标题不能为空');
          return;
        }
        let body={
          recommended:vm.editUserInfo.checked?1:0,
          title:vm.editUserInfo.title,
          article_id:vm.editUserInfo.article_id,
          content:vm.editUserInfo.content,
          pics:vm.editUserInfo.pics,
        }
        api.questionEdit(body).then(res=>{
          if(res.data.code==300000){
            vm.getPhotowallListData();
            vm.dialogFormVisible=false;
          }
        });
      },
      //删除
      deleteItem(item){
        let vm = this;
        this.$confirm('确认删除？')
        .then(_ => { 
          api.questionDelete({article_id:item.article_id}).then(res=>{
            if(res.data.code==300000){
              vm.getPhotowallListData();
              done();
            }
          })
        })
        .catch(_ => {});
      },
      getPhotowallListData(){ //获取列表数据
        let vm = this;  
        api.getQuestionList(vm.postForm).then(res=>{ 
          let resData=res.data.data;
            if(res.data.code==300000&&resData){
              if(resData.data){
                vm.questionArr=resData.data;
              } 
              vm.postForm.page=resData.info.page_num;
              vm.postForm.total=resData.info.total;
            }
        })
      },
      // 当前页数
      pageChange(e){
        this.postForm.page = e; 
        this.getPhotowallListData();
      },   
      //查看日志详情
      fetchArtDetail(item){
        let vm = this; 
        api.getArtDetail({article_id:item.article_id}).then(res=>{
          if(res.data.code==300000){
            vm.detailVisible=true;
            // console.log(res.data.data);
            vm.detailData=res.data.data;
          }
        })
      }, 

      //删除上传的图片
        clearImg(index,item){
            // this.form.imgUrl='';
          let vm = this;
          api.deletePhoto({art_id:vm.editUserInfo.article_id,link:item}).then(res=>{
            if(res.data.code==300000){
              vm.editUserInfo.pics.splice(index,1)
            }
          }); 
        },
        //上传图片
        addImgEvent(val){  
            this.editUserInfo.pics.push(val); 
        },


    }
  }
</script>
<style>
  .content-input .el-textarea__inner{
    min-height:150px !important;
    height:150px;
  }
</style>
<style lang="scss" scoped>
    .back-white{
      background:#fff;
    }
    .search-box{
      padding:20px;
      .search-input{
        width:200px !important;
      }
      .list-state{
        display:inline-block;
        margin-left:20px;
      }
    } 

    .main-box{
      padding:20px;
      background:#fff;
      .group-list{
        width:100%;
        border-bottom:1px solid #EBEBEB;  
        padding:10px 6px 30px;
        position: relative;
        cursor: pointer;
        &:hover{
          background:#E8F3FE;
        }
        .left-box{
          color:#909399; 
          width:88%;
          .is_top{
            font-size: 16px;
            color:#F56C6C;
            margin-bottom:5px;
          }
          .title{
            font-size: 16px;
            font-weight: bold;
            color:#000;
          }
          .info{
            font-size: 14px;
            padding:12px 0; 
            margin-bottom: 10px;
          }
          .footer-text{
            position: absolute;
            bottom:20px;
            left:10px;
            color:#666;
            .topic{
              display:inline-block;
              span{
                color:#F56C6C;
                font-size:20px;
              }
            }
            span{
              display:inline-block;
              margin-right:10px;
            }
          }
        }
        .right-box {
          width:12%; 
          .btn{
            margin-top:10px; 
          }
          .last-btn{
            margin-top:10px;
            margin-left:0;
          }
          .el-icon-s-flag{
            color:#67C23A;
            margin-top:10px;
            font-size:20px;
          }
        }
      }
    }

    .pagination{
      display:block;
      width:100%;
      padding-bottom:60px;
      margin-top:20px;
    }

    .news-content{
      .header{
        font-weight: bold;
        color:#000;
      }
      .main{
        width:100%;
        .date-time{
          font-size:12px;
          color:#909399;
        }
        .content-text{
          margin:10px 0;
        }
        .content-img-box{ 
          .img-item{
            width:150px;
            height:150px; 
            margin-right:15px;
            margin-bottom:10px;
            display: flex;
            justify-content: center;
            align-items: center;
            &:last-child{
              margin-right:0;
            }
          }
          
        }
      }
      
    }
    
</style>